<template>
	<div class="toolbar">
		<el-button @click='close'>清空</el-button>
		<!-- <el-button slot="reference">删除</el-button> -->
		<!-- <el-radio-group v-model="layoutType" @input="">
			<el-radio-button label="PC"></el-radio-button>
			<el-radio-button label="H5"></el-radio-button>
		</el-radio-group> -->
		<div class="toolbar_center"></div>
		<!-- <el-button>撤销</el-button> -->
		<el-button>预览</el-button>
		<el-button>JSON</el-button>
		<!-- <el-button>导出代码</el-button> -->
		<el-button>生成SFC</el-button>
		<el-button>保存</el-button></el-col>
	</div>
</template>

<script>
	export default {
		name: 'Toolbar',
		data() {
			return {
				layoutType: "PC"
			}
		},
		methods: {
			close() {
				this.$confirm('清空后将不能恢复，确定要清空所有组件吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$emit('close')
				}).catch(() => {

				});
			},
			setLayoutType() {

			},
		}
	}
</script>
<style scoped lang="scss">
	.toolbar {
		padding: 0 20px;
		height: 50px;
		display: flex;
		align-items: center;
		border-bottom: var(--xw-border-dotted);

		&_center {
			flex: 1;
		}
	}
</style>